<template>
    <div class="box">
        <div class="like">
            <div class="you">
                <h3>猜你喜欢</h3>
                <p>YOU MAY ALSO LIKE</p>
            </div>
            <div class="may">
                <button @click="fun('/')">
                    <img src="@/assets/kang/20.png" alt="">
                    <div class="also">
                        <h4>喜茶 4口味混合装 无/···</h4>
                        <p>3334人已购买</p> 
                        <h3>￥66.00</h3>
                        <span><img src="@/assets/kang/jia.png" alt=""></span>
                    </div>
                </button>
                <button @click="fun('/')">
                    <img src="@/assets/kang/20.png" alt="">
                    <div class="also">
                        <h4>喜茶 4口味混合装 无/···</h4>
                        <p>3334人已购买</p> 
                        <h3>￥66.00</h3>
                        <span><img src="@/assets/kang/jia.png" alt=""></span>
                    </div>
                </button>
                <button @click="fun('/')">
                    <img src="@/assets/kang/20.png" alt="">
                    <div class="also">
                        <h4>喜茶 4口味混合装 无/···</h4>
                        <p>3334人已购买</p> 
                        <h3>￥66.00</h3>
                        <span><img src="@/assets/kang/jia.png" alt=""></span>
                    </div>
                </button>
                <button @click="fun('/')">
                    <img src="@/assets/kang/20.png" alt="">
                    <div class="also">
                        <h4>喜茶 4口味混合装 无/···</h4>
                        <p>3334人已购买</p> 
                        <h3>￥66.00</h3>
                        <span><img src="@/assets/kang/jia.png" alt=""></span>
                    </div>
                </button>
                <button @click="fun('/')">
                    <img src="@/assets/kang/20.png" alt="">
                    <div class="also">
                        <h4>喜茶 4口味混合装 无/···</h4>
                        <p>3334人已购买</p> 
                        <h3>￥66.00</h3>
                        <span><img src="@/assets/kang/jia.png" alt=""></span>
                    </div>
                </button>
                <button @click="fun('/')">
                    <img src="@/assets/kang/20.png" alt="">
                    <div class="also">
                        <h4>喜茶 4口味混合装 无/···</h4>
                        <p>3334人已购买</p> 
                        <h3>￥66.00</h3>
                        <span><img src="@/assets/kang/jia.png" alt=""></span>
                    </div>
                </button>
                <button @click="fun('/')">
                    <img src="@/assets/kang/20.png" alt="">
                    <div class="also">
                        <h4>喜茶 4口味混合装 无/···</h4>
                        <p>3334人已购买</p> 
                        <h3>￥66.00</h3>
                        <span><img src="@/assets/kang/jia.png" alt=""></span>
                    </div>
                </button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    methods:{
        fun(url){
            this.$router.push(url)
        },
        funb(url){
            this.$router.replace(url)
        }
    }
}
</script>

<style scoped>
    .box{
        width: 100%;
        height: 100%;
    }  
    .like{
        width: 90%;
        height: 100%;
        margin: auto;
        
    } 
    .you{
        height: 0.5rem;
        /* background-color: thistle; */
        line-height: 0.5rem;
        margin-bottom: 0.1rem;
    }
    .you>h3{
        float: left;
    }
    .you>p{
        float: left;
        text-indent: 0.1rem;
        font-size: 0.1rem;
        color: gainsboro;
    }
    .may{
        width: 100%;
        /* background-color: gray;
         */
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-between;
    }
    .may>button{
        width: 49%;
        height: 2.84rem;
        border: none;
        background: none;
        margin-bottom: 0.1rem;
    }
    .may>button>img{
        width: 100%;
    }
    .also{
        height: 1.2rem;
        background-color: white;
        overflow: hidden;
    }
    .also>h4{
        font-size: 0.15rem;
        margin-top: 0.15rem;
        
    }
    .also>p{
        font-size: 0.08rem;
        /* float: left; */
        margin-left: -0.8rem;
        margin-top: 0.15rem;
    }
    .also>h3{
       float: left;
       margin-top: 0.15rem;
       text-indent: 0.15rem;
    }
    .also>span{
        width: 0.25rem;
        height: 0.25rem;
        /* background-color: gray; */
        float: right;
        margin-top: 0.15rem;
        margin-right: 0.2rem;
    }
    .also>span>img{
        width: 0.25rem;
        height: 0.25rem;
        
    }
</style>
